"use client";
import {
    claimActivityReward,
    ContinuousCfgItem,
    ContinuousListItem,
    ContinuousResult,
    ContinuousRewardItem,
    ContinuousStageItem,
    getContinuousRechargeInfo,
} from "@/api/activity";
import CutDown from "@/components/CutDown";
import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
import { useRouter } from "@/i18n/routing";
import { formatAmount } from "@/utils/index";
import { Toast } from "antd-mobile";
import BigNumber from "bignumber.js";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import React from "react";
import styles from "./page.module.scss";

interface Cfg1Item {
    text: string;
    text2: string;
    key: number;
    footer: string;
    footer2?: string;
}

interface StageItem extends ContinuousStageItem, Cfg1Item {}

interface ListItem {
    dayId: number;
    data: ContinuousListItem;
}

interface RewardItem {
    dayId: number;
    data: ContinuousRewardItem[];
}
//"#297fcf"
const DayItem = ({
    data,
    idx,
    onClaim,
    level,
}: {
    data: ContinuousCfgItem;
    idx: number;
    onClaim: (data: ContinuousCfgItem) => void;
    level: string;
}) => {
    const dayColor = React.useMemo(() => {
        return ["#12940f", "#297fcf", "#ec3920"][idx % 3];
    }, [idx]);

    const doClaim = () => {
        if (onClaim && typeof onClaim === "function") {
            onClaim(data);
        }
    };

    return (
        <div className={styles.dayItemBox}>
            {data.id >= 2 && (
                <div className="mb-[.1rem] flex flex-row justify-center">
                    <div className={styles.canGet}>Grande Prêmio Disponível</div>
                </div>
            )}

            {!!data.end_at && (
                <div className="item-center mb-[.1rem] flex flex-row justify-center">
                    <CutDown
                        endTime={data.end_at - Date.now() / 1000}
                        itemBgColor="rgba(255,255,255,.4)"
                    ></CutDown>
                </div>
            )}
            <div className={styles.premioItem}>
                <div className={styles.premioItemDay}>
                    <span style={{ color: dayColor }}>{data.days}</span>
                </div>
                <div className="flex flex-col justify-between">
                    <div className="text-[.16rem] font-bold">
                        Recarga contínua por {data.days} dias
                    </div>
                    <div className="flrx-row flex items-center justify-between">
                        <div>
                            Recompensa de login
                            {/* {level}  */}
                            {/* {data.target_reward}R */}
                        </div>
                        <div
                            className={clsx(styles.premioItemBtn, {
                                [styles.disabled]: !data.isCanClaim,
                            })}
                            onClick={doClaim}
                        >
                            {data.is_sign === 0 ? "Recebido" : "Receber"}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

const Page = () => {
    const t = useTranslations();
    const query = Object.fromEntries(useSearchParams());
    const [data, setData] = React.useState<ContinuousResult>({} as ContinuousResult);
    const router = useRouter();
    const dayContainer = React.useRef<HTMLDivElement>(null);

    const [amount, setAmount] = React.useState<any>({});
    const [visible, setVisible] = React.useState<boolean>(false);

    const act = React.useMemo(() => {
        if (!data || data.type === 11) return 0;
        return 1;
    }, [data]);

    React.useEffect(() => {
        getData();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    const getData = async () => {
        const res = await getContinuousRechargeInfo({ activity_id: Number(query.activity_id) });
        if (res.code === 200) {
            setData(res.data);
        }
    };
    const cfg1: Record<number, Cfg1Item> = React.useMemo(() => {
        return {
            1: {
                text: "LOGIN ",
                text2: "PLATINUM",
                key: 1,
                footer: "Alcançou",
            },
            2: {
                text: "LOGIN",
                text2: "GOLD",
                key: 2,
                footer: "Ainda preciso",
            },
            3: {
                text: "LOGIN",
                text2: "DIAMANTE",
                key: 3,
                footer: "Ainda preciso",
            },
            // 4: {
            //     text: "ENTRAR NO",
            //     text2: "MONOPOLY",
            //     key: 4,
            //     footer: "Ainda preciso",
            // },
            // 5: {
            //     text: "ENTRAR NO",
            //     text2: "MONOPOLY",
            //     key: 5,
            //     footer: "Ainda preciso",
            // },
            // 6: {
            //     text: "ENTRAR NO",
            //     text2: "MONOPOLY",
            //     key: 6,
            //     footer: "Ainda preciso",
            // },
            // 7: {
            //     text: "ENTRAR NO",
            //     text2: "MONOPOLY",
            //     key: 7,
            //     footer: "Ainda preciso",
            // },
        };
    }, []);

    const stage = React.useMemo<StageItem[]>(() => {
        let stags = data?.list?.stage;
        if (!data?.list?.stage) {
            stags = [
                { id: 1 },
                { id: 2 },
                { id: 3 },
                // { id: 4 },
                // { id: 5 },
                // { id: 6 },
                // { id: 7 },
            ] as unknown as ContinuousStageItem[];
        }
        const result: StageItem[] = stags
            .map((item) => {
                console.log(112233, item);
                return {
                    ...item,
                    ...cfg1[item.id],
                    footer2: item.diff_num ? `${item.diff_num}R` : "",
                };
            })
            .sort((a: ContinuousStageItem, b: ContinuousStageItem) => a.id - b.id);
        return result; //[{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }];
    }, [data?.list?.stage, cfg1]);

    const list = React.useMemo<ListItem[]>(() => {
        if (!data?.list?.list) {
            return [];
        }
        const result: ListItem[] = [] as ListItem[];
        Object.keys(data?.list?.list).forEach((key: string) => {
            const item = data?.list?.list[key as any];
            const key1 = Object.keys(item)[0];
            result.push({ dayId: Number(key), data: item[key1 as any] });
        });
        console.log(result);
        return result.sort((a, b) => a.dayId - b.dayId);
    }, [data?.list?.list]);

    const reward_list = React.useMemo<RewardItem[]>(() => {
        if (!data?.list?.reward_list) {
            return [];
        }
        const result: RewardItem[] = [] as RewardItem[];

        Object.keys(data?.list?.reward_list).forEach((key: string) => {
            const item = data?.list?.reward_list[key as any];
            const res2: ContinuousRewardItem[] = [];
            Object.keys(item).forEach((key2: string) => {
                const item2 = item[key2 as any];
                res2.push(item2);
            });
            result.push({ dayId: Number(key), data: res2 });
        });

        return result;
    }, [data?.list?.reward_list]);

    const waitList = React.useMemo<ContinuousCfgItem[]>(() => {
        if (!data?.list?.config_list) return [];
        const result = [] as ContinuousCfgItem[];
        data?.list?.config_list.forEach((item) => {
            if (
                item.is_sign === 0 ||
                item.is_suss === 1 ||
                !(item.start_at * 1000 < Date.now() && item.end_at * 1000 > Date.now())
            ) {
                item.isCanClaim = false;
            } else {
                item.isCanClaim = true;
            }
            result.push(item);
        });
        return result.sort((a, b) => a.days - b.days);
    }, [data?.list?.config_list]);

    const goDeposit = () => {
        router.push("/deposit");
    };

    const doClaim = async (data: ContinuousCfgItem) => {
        if (!query.activity_id) {
            Toast.show({ content: "Missing activity ID" });
            return;
        }
        if (!data.is_sign) return;
        try {
            const res = await claimActivityReward({
                activity_id: Number(query.activity_id),
                id: data.days,
            });

            if (res.code === 200 && res?.data?.code === 1) {
                const amountObj: any = {};
                if (res?.data?.reward) {
                    res?.data?.reward.forEach((item: any) => {
                        amountObj[`coin_${item.coin_type}`] = formatAmount(item.amount);
                    });
                }
                if (res?.data?.extra_reward) {
                    res?.data?.extra_reward.forEach((item: any) => {
                        amountObj[`coin_${item.coin_type}`] = formatAmount(
                            new BigNumber(amountObj[`coin_${item.coin_type}`] || 0)
                                .plus(item.amount)
                                .toString()
                        );
                    });
                }
                setAmount(amountObj);
                setVisible(true);
                getData();
            } else {
                throw new Error(t(`code.400`));
            }
        } catch (error: any) {
            if (error) {
                Toast.show({
                    content: error.message || error.toString(),
                    maskClickable: false,
                });
            }
        }
    };

    return (
        <div className={clsx(styles.continuePage)}>
            <div className={styles.container}>
                <div className={styles.top}>
                    <img className={styles.img} src="/proxyRecharge/top.png" alt="" />
                    {/* <div className={styles.recharge} onClick={goDeposit}>
                        RECARGA
                    </div> */}
                </div>
                <div className={styles.content}>
                    <div className={styles.tip}>
                        <div
                            className={clsx(styles.text, {
                                [styles.active]: act === 0,
                            })}
                        >
                            Meu login
                        </div>
                        <div
                            className={clsx(styles.text, {
                                [styles.active]: act === 1,
                            })}
                        >
                            Login de amigo
                        </div>
                    </div>
                    <div className={styles.inner}>
                        <div
                            className={clsx(styles.innerContainer, {
                                [styles.innerContainer1]: act === 1,
                            })}
                        >
                            {!!list?.length && (
                                <div
                                    className={clsx(styles.stageBox, {
                                        [styles.stageBox1]: act === 1,
                                    })}
                                >
                                    {list.map((item, idx) => {
                                        return (
                                            <div
                                                key={item.dayId}
                                                className={clsx(styles.stageItem, {
                                                    [styles.unlock]: item.data.is_sign === 1,
                                                    [styles.lock]: item.data.is_sign === 0,
                                                })}
                                            >
                                                <div className={styles.stageText}>
                                                    <div>Para ser</div>
                                                    <div className="mt-[.03rem]">concluído</div>
                                                </div>
                                                <div className={styles.stageText2}>
                                                    <span>recarga</span>
                                                    <div className={styles.stageText2Num}>
                                                        {item.data.pay_num}
                                                    </div>
                                                </div>
                                                <div className={clsx(styles.stageImg)}></div>
                                                <div className={styles.stageDay}>
                                                    Dia {item.dayId}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                            {/* {!!list?.length && (
                                <div className={styles.daybox}>
                                    <div className={styles.dayContainer} ref={dayContainer}>
                                        {list.map((item: any) => {
                                            return (
                                                <div
                                                    key={item.dayId}
                                                    className={clsx(styles.dayItem, {
                                                        [styles.active]: item.data.is_sign,
                                                    })}
                                                >
                                                    <div className={styles.dayItemText}>
                                                        {item.dayId} dia
                                                    </div>
                                                    <div className={styles.dayitemTextActive}>
                                                        <img
                                                            src={`/continuous/s${item.data.id}.png`}
                                                            alt=""
                                                        />
                                                        <div className="flex flex-row items-end text-[#dbc6ff]">
                                                            <span className="relative top-[1px] mt-[2px] text-[.13rem]">
                                                                {item.dayId}
                                                            </span>
                                                            <span>dia</span>
                                                        </div>
                                                        <div>recarga</div>
                                                        <div className="mt-[.03rem] w-[100%] overflow-hidden text-ellipsis text-[#ffb400]">
                                                            {item?.data?.pay_num}
                                                        </div>
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            )} */}
                            {!!waitList.length && (
                                <div className={styles.premio}>
                                    <div
                                        className={clsx(styles.premioTitle, {
                                            [styles.premioTitle1]: act === 1,
                                        })}
                                    >
                                        {act === 1 && (
                                            <div className={styles.premioTitleText}>
                                                <div>AMIGO ENTRAR PARA</div>
                                                <div>RECEBER CORTESIA</div>
                                            </div>
                                        )}
                                        {act === 0 && (
                                            <div className={styles.premioTitleText}>
                                                <div>ENTRAR E RECEBER CORTESIA</div>
                                            </div>
                                        )}
                                    </div>
                                    <div className={styles.premioContainer}>
                                        <div className={styles.premioContent}>
                                            {waitList.map((item, idx: number) => {
                                                return (
                                                    <DayItem
                                                        key={item.days}
                                                        data={item}
                                                        idx={idx}
                                                        onClaim={doClaim}
                                                        level={cfg1[item.id].text2}
                                                    ></DayItem>
                                                );
                                            })}
                                        </div>
                                    </div>
                                </div>
                            )}
                            <div className={styles.cfgbox}>
                                <div className={styles.cfgContainer} ref={dayContainer}>
                                    <div className={styles.cfgHeader}>
                                        <div>
                                            Dias de
                                            <br />
                                            depósito
                                        </div>
                                        <div>
                                            Requisitos da <br />
                                            atividade
                                        </div>
                                        {data.type === 11 && (
                                            <div>
                                                Valor do
                                                <br />
                                                bônus
                                            </div>
                                        )}
                                        {data.type === 13 && (
                                            <div>
                                                Recompensas <br />
                                                de Agente
                                            </div>
                                        )}
                                    </div>
                                    {reward_list.map((item) => {
                                        return (
                                            <div key={item.dayId} className={styles.cfgItem}>
                                                <div className={styles.cfgItemName}>
                                                    Recarga contínua por{" "}
                                                    <div className="text-[#faab00]">
                                                        {item.dayId}dias
                                                    </div>
                                                </div>
                                                <div className="flex-1">
                                                    {item.data.map((item2, idx) => {
                                                        return (
                                                            <div
                                                                key={item2.id}
                                                                className={styles.cfgItemChild}
                                                            >
                                                                <div>
                                                                    Mais de {item2.target_num} por
                                                                    dia
                                                                </div>
                                                                <div>{item2.target_reward}</div>
                                                            </div>
                                                        );
                                                    })}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            </div>

                            <div className={styles.introbox}>
                                <div className={styles.introContainer}>
                                    <div className={styles.introTitle}>
                                        <span className={styles.introTitleText}>
                                            Regras de Atividade
                                        </span>
                                    </div>
                                    <div className="h-[.2rem]"></div>
                                    <ul className={styles.introboxDesc}>
                                        <li>
                                            Jogadores que atendem aos requisitos podem receber o
                                            bônus diretamente.
                                        </li>
                                        <li>
                                            Solicite o bônus desta promoção dentro do período
                                            promocional. Não se inscrever após o prazo limite será
                                            considerado como desistência automática.
                                        </li>
                                        <li>
                                            Ao participar desta promoção, você concorda em cumprir
                                            as Regras e Termos da Promoção.
                                        </li>
                                    </ul>

                                    <div className="mt-[.1rem]">
                                        <div className="pb-[.1rem] text-center text-[.14rem] font-bold">
                                            Termos e Condições
                                        </div>
                                    </div>
                                    <ul className={styles.introboxDesc}>
                                        <li>
                                            Todas as ofertas são liquidadas em RMB (CNY) e são
                                            baseadas no horário de Pequim.
                                        </li>
                                        <li>
                                            Cada jogador, domicílio, endereço, endereço de e-mail,
                                            número de telefone, método de pagamento (mesmo cartão de
                                            débito/crédito/conta bancária) e endereço IP só pode
                                            aproveitar a oferta uma vez por dia.
                                        </li>
                                        <li>
                                            Se for descoberto que qualquer grupo ou indivíduo está
                                            obtendo bônus desonestamente ou abusando de benefícios
                                            da empresa, a empresa reserva-se o direito de congelar
                                            ou cancelar o saldo do grupo.
                                        </li>
                                        <li>
                                            A Ginkgo Live reserva-se o direito de interpretação
                                            final do evento; bem como o direito de modificar ou
                                            encerrar o evento sem aviso prévio.
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <GlobalNotify
                amount={amount}
                visible={visible}
                onChange={() => setVisible(false)}
                deraction={5000}
            ></GlobalNotify>
        </div>
    );
};

export default Page;